<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>简历详情</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.0/font/bootstrap-icons.min.css">
    <style>
        :root {
            --primary-color: #3370ff;
            --background-color: #f5f7fa;
            --card-bg-color: #ffffff;
            --border-color: #e0e0e0;
            --text-primary: #303133;
            --text-secondary: #606266;
            --text-light: #909399;
            --success-color: #67c23a;
            --warning-color: #ff9900;
            --border-radius: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
            background-color: var(--background-color);
            color: var(--text-primary);
            line-height: 1.5;
            font-size: 14px;
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
            height: 100%;
            position: relative;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--background-color);
            padding-bottom: 60px;
        }

        /* Header */
        .page-header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--card-bg-color);
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            z-index: 10;
        }

        .page-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .back-button {
            position: absolute;
            left: 15px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
        }

        .action-button {
            position: absolute;
            right: 15px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
        }

        /* Resume Content */
        .resume-content {
            padding: 16px;
        }

        .resume-section {
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            animation: slide-in-up 0.4s ease forwards;
            opacity: 0;
        }

        .resume-section:nth-child(1) { animation-delay: 0.1s; }
        .resume-section:nth-child(2) { animation-delay: 0.2s; }
        .resume-section:nth-child(3) { animation-delay: 0.3s; }
        .resume-section:nth-child(4) { animation-delay: 0.4s; }
        .resume-section:nth-child(5) { animation-delay: 0.5s; }

        @keyframes slide-in-up {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .edit-button {
            color: var(--primary-color);
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .edit-button i {
            margin-right: 4px;
        }

        /* Basic Info */
        .basic-info {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 16px;
            object-fit: cover;
            border: 2px solid rgba(51, 112, 255, 0.2);
        }

        .info-content {
            flex: 1;
        }

        .name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .info-item {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
        }

        .info-item i {
            margin-right: 6px;
            font-size: 14px;
            color: var(--primary-color);
        }

        /* Education & Experience */
        .timeline-item {
            position: relative;
            padding-left: 20px;
            margin-bottom: 16px;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border-color);
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            left: -4px;
            top: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--primary-color);
        }

        .timeline-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .timeline-title {
            font-size: 15px;
            font-weight: 600;
        }

        .timeline-date {
            font-size: 13px;
            color: var(--text-light);
        }

        .timeline-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .timeline-description {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Skills */
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .skill-tag {
            background-color: #f0f0f0;
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            transition: all 0.3s ease;
        }

        .skill-tag:hover {
            background-color: #e6f0ff;
            color: var(--primary-color);
            transform: translateY(-2px);
        }

        /* Projects */
        .project-item {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--border-color);
        }

        .project-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .project-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .project-description {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Bottom Actions */
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg-color);
            padding: 12px 16px;
            display: flex;
            gap: 12px;
            box-shadow: 0 -1px 2px rgba(0,0,0,0.05);
            max-width: 375px;
            margin: 0 auto;
            z-index: 10;
            animation: slide-in-bottom 0.4s ease forwards;
        }

        @keyframes slide-in-bottom {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        .action-btn {
            flex: 1;
            padding: 12px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .primary-btn {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 2px 6px rgba(51, 112, 255, 0.3);
        }

        .primary-btn:hover {
            background-color: #2860f0;
            box-shadow: 0 4px 8px rgba(51, 112, 255, 0.4);
        }

        .secondary-btn {
            background-color: #f0f0f0;
            color: var(--text-primary);
        }

        .secondary-btn:hover {
            background-color: #e5e5e5;
        }

        .action-btn:active {
            opacity: 0.9;
            transform: scale(0.98);
        }

        .action-btn i {
            margin-right: 8px;
        }

        /* Menu */
        .context-menu {
            position: absolute;
            top: 48px;
            right: 16px;
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            z-index: 100;
            min-width: 140px;
            display: none;
            animation: menu-fade 0.2s ease;
        }

        @keyframes menu-fade {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .context-menu.show {
            display: block;
        }

        .menu-item {
            padding: 12px 16px;
            font-size: 14px;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .menu-item:hover {
            background-color: var(--background-color);
            color: var(--primary-color);
        }

        .menu-item i {
            margin-right: 8px;
        }

        .menu-item.danger {
            color: #ff4d4f;
        }

        .menu-item.danger:hover {
            background-color: #fff1f0;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 99;
            display: none;
        }

        .overlay.show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">简历详情</h1>
            <button class="action-button" id="menuBtn">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
        </header>

        <div class="resume-content">
            <!-- 基本信息 -->
            <section class="resume-section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="bi bi-person-fill"></i>
                        基本信息
                    </h2>
                    <button class="edit-button" data-section="basic">
                        <i class="bi bi-pencil-fill"></i>
                        编辑
                    </button>
                </div>
                <div class="basic-info">
                    <img src="../img/user-avatar.jpg" alt="头像" class="avatar">
                    <div class="info-content">
                        <div class="name">张同学</div>
                        <div class="info-item">
                            <i class="bi bi-mortarboard-fill"></i>
                            北京大学 · 计算机科学与技术
                        </div>
                        <div class="info-item">
                            <i class="bi bi-envelope-fill"></i>
                            example@email.com
                        </div>
                        <div class="info-item">
                            <i class="bi bi-telephone-fill"></i>
                            138****8888
                        </div>
                    </div>
                </div>
            </section>

            <!-- 教育经历 -->
            <section class="resume-section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="bi bi-mortarboard-fill"></i>
                        教育经历
                    </h2>
                    <button class="edit-button" data-section="education">
                        <i class="bi bi-pencil-fill"></i>
                        编辑
                    </button>
                </div>
                <div class="timeline-item">
                    <div class="timeline-header">
                        <div class="timeline-title">北京大学</div>
                        <div class="timeline-date">2020.09 - 2024.06</div>
                    </div>
                    <div class="timeline-subtitle">计算机科学与技术 · 本科</div>
                    <div class="timeline-description">
                        主修课程：数据结构、算法分析、操作系统、计算机网络、数据库系统、软件工程、人工智能导论、机器学习基础等
                    </div>
                </div>
            </section>

            <!-- 实习经历 -->
            <section class="resume-section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="bi bi-briefcase-fill"></i>
                        实习经历
                    </h2>
                    <button class="edit-button" data-section="experience">
                        <i class="bi bi-pencil-fill"></i>
                        编辑
                    </button>
                </div>
                <div class="timeline-item">
                    <div class="timeline-header">
                        <div class="timeline-title">腾讯科技</div>
                        <div class="timeline-date">2023.06 - 2023.09</div>
                    </div>
                    <div class="timeline-subtitle">前端开发实习生</div>
                    <div class="timeline-description">
                        1. 参与公司核心产品的前端开发工作，负责页面重构和性能优化<br>
                        2. 使用 React 开发新功能模块，提升用户体验，实现数据可视化相关功能<br>
                        3. 编写技术文档，参与代码审查，推动前端工程化建设<br>
                        4. 通过性能优化，将页面加载速度提升30%，改善用户体验
                    </div>
                </div>
            </section>

            <!-- 项目经历 -->
            <section class="resume-section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="bi bi-code-square"></i>
                        项目经历
                    </h2>
                    <button class="edit-button" data-section="projects">
                        <i class="bi bi-pencil-fill"></i>
                        编辑
                    </button>
                </div>
                <div class="project-item">
                    <div class="project-title">校园二手交易平台</div>
                    <div class="timeline-date">2023.03 - 2023.05</div>
                    <div class="project-description">
                        1. 使用 Vue.js 开发前端界面，实现商品展示、搜索、交易等功能<br>
                        2. 设计并实现用户认证、商品管理等后端 API<br>
                        3. 使用 MySQL 设计数据库，优化查询性能<br>
                        4. 实现了即时通讯功能，便于买卖双方沟通
                    </div>
                </div>
                <div class="project-item">
                    <div class="project-title">个人博客系统</div>
                    <div class="timeline-date">2022.10 - 2022.12</div>
                    <div class="project-description">
                        1. 基于 Node.js 和 Express 框架搭建后端服务<br>
                        2. 使用 MongoDB 存储博客文章和用户数据<br>
                        3. 实现 Markdown 编辑器与预览功能<br>
                        4. 集成评论系统与文章分享功能
                    </div>
                </div>
            </section>

            <!-- 技能特长 -->
            <section class="resume-section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="bi bi-star-fill"></i>
                        技能特长
                    </h2>
                    <button class="edit-button" data-section="skills">
                        <i class="bi bi-pencil-fill"></i>
                        编辑
                    </button>
                </div>
                <div class="skill-tags">
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">TypeScript</span>
                    <span class="skill-tag">Vue.js</span>
                    <span class="skill-tag">React</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">Express</span>
                    <span class="skill-tag">MySQL</span>
                    <span class="skill-tag">MongoDB</span>
                    <span class="skill-tag">Git</span>
                    <span class="skill-tag">Webpack</span>
                </div>
            </section>
        </div>

        <!-- 底部操作栏 -->
        <div class="bottom-actions">
            <button class="action-btn secondary-btn" id="downloadBtn">
                <i class="bi bi-download"></i>
                下载简历
            </button>
            <button class="action-btn primary-btn" id="editBtn">
                <i class="bi bi-pencil-fill"></i>
                编辑简历
            </button>
        </div>

        <!-- 右上角菜单 -->
        <div class="overlay" id="overlay"></div>
        <div class="context-menu" id="context-menu">
            <div class="menu-item" id="setDefaultBtn">
                <i class="bi bi-star-fill"></i>
                设为默认
            </div>
            <div class="menu-item" id="shareBtn">
                <i class="bi bi-share-fill"></i>
                分享简历
            </div>
            <div class="menu-item danger" id="deleteBtn">
                <i class="bi bi-trash-fill"></i>
                删除简历
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const menuBtn = document.getElementById('menuBtn');
            const overlay = document.getElementById('overlay');
            const contextMenu = document.getElementById('context-menu');
            const editButtons = document.querySelectorAll('.edit-button');
            const downloadBtn = document.getElementById('downloadBtn');
            const editBtn = document.getElementById('editBtn');
            const setDefaultBtn = document.getElementById('setDefaultBtn');
            const shareBtn = document.getElementById('shareBtn');
            const deleteBtn = document.getElementById('deleteBtn');
            
            // 获取URL参数中的简历ID
            const urlParams = new URLSearchParams(window.location.search);
            const resumeId = urlParams.get('id') || '1'; // 默认为1
            
            // 初始化页面
            loadResumeDetails(resumeId);
            
            // 右上角菜单按钮点击事件
            menuBtn.addEventListener('click', function() {
                toggleMenu();
            });
            
            // 点击遮罩层关闭菜单
            overlay.addEventListener('click', function() {
                hideMenu();
            });
            
            // 编辑按钮点击事件
            editButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const section = this.getAttribute('data-section');
                    navigateToEdit(resumeId, section);
                });
            });
            
            // 底部操作按钮点击事件
            downloadBtn.addEventListener('click', function() {
                downloadResume(resumeId);
            });
            
            editBtn.addEventListener('click', function() {
                navigateToEdit(resumeId);
            });
            
            // 菜单选项点击事件
            setDefaultBtn.addEventListener('click', function() {
                setAsDefault(resumeId);
                hideMenu();
            });
            
            shareBtn.addEventListener('click', function() {
                shareResume(resumeId);
                hideMenu();
            });
            
            deleteBtn.addEventListener('click', function() {
                deleteResume(resumeId);
                hideMenu();
            });
            
            // 显示/隐藏菜单
            function toggleMenu() {
                if (contextMenu.classList.contains('show')) {
                    hideMenu();
                } else {
                    showMenu();
                }
            }
            
            function showMenu() {
                overlay.classList.add('show');
                contextMenu.classList.add('show');
            }
            
            function hideMenu() {
                overlay.classList.remove('show');
                contextMenu.classList.remove('show');
            }
            
            // 加载简历详情
            function loadResumeDetails(id) {
                // 实际项目中应该从API获取数据
                // 这里只做简单模拟
                console.log(`加载简历ID: ${id} 的详情`);
                
                // 如果需要，可以根据ID动态更新页面内容
                document.title = `简历详情 - ID:${id}`;
                
                // 可以根据id更新页面内容，这里仅做演示
            }
            
            // 跳转到编辑页面
            function navigateToEdit(id, section = '') {
                let url = `resume-edit.html?id=${id}`;
                if (section) {
                    url += `&section=${section}`;
                }
                window.location.href = url;
            }
            
            // 下载简历
            function downloadResume(id) {
                console.log(`下载简历ID: ${id}`);
                
                // 显示下载中提示
                showToast('简历下载中...');
                
                // 模拟下载过程
                setTimeout(() => {
                    // 创建一个虚拟的下载链接
                    const link = document.createElement('a');
                    link.href = `../data/resume_${id}.pdf`;
                    link.download = `简历_${id}.pdf`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    showToast('简历已下载');
                }, 1000);
            }
            
            // 设为默认简历
            function setAsDefault(id) {
                console.log(`设置简历ID: ${id} 为默认`);
                
                // 显示设置中提示
                showToast('正在设置为默认简历...');
                
                // 模拟API请求
                setTimeout(() => {
                    showToast('已设为默认简历');
                }, 800);
            }
            
            // 分享简历
            function shareResume(id) {
                console.log(`分享简历ID: ${id}`);
                
                // 如果支持Web Share API
                if (navigator.share) {
                    navigator.share({
                        title: '我的简历',
                        text: '查看我的个人简历',
                        url: window.location.href
                    })
                    .then(() => console.log('分享成功'))
                    .catch((error) => console.log('分享失败', error));
                } else {
                    // 否则显示自定义分享UI
                    showToast('分享功能即将推出');
                }
            }
            
            // 删除简历
            function deleteResume(id) {
                if (confirm('确定要删除此简历吗？此操作不可恢复。')) {
                    console.log(`删除简历ID: ${id}`);
                    
                    // 显示删除中提示
                    showToast('正在删除简历...');
                    
                    // 模拟API请求
                    setTimeout(() => {
                        showToast('简历已删除');
                        
                        // 跳转回简历列表页
                        setTimeout(() => {
                            window.location.href = 'my-resumes.html';
                        }, 1000);
                    }, 800);
                }
            }
            
            // 显示提示消息
            function showToast(message) {
                // 移除可能存在的toast
                const existingToast = document.querySelector('.toast-message');
                if (existingToast) {
                    document.body.removeChild(existingToast);
                }
                
                // 创建新toast
                const toast = document.createElement('div');
                toast.className = 'toast-message';
                toast.textContent = message;
                toast.style.position = 'fixed';
                toast.style.top = '50%';
                toast.style.left = '50%';
                toast.style.transform = 'translate(-50%, -50%)';
                toast.style.backgroundColor = 'rgba(0,0,0,0.7)';
                toast.style.color = 'white';
                toast.style.padding = '10px 16px';
                toast.style.borderRadius = '4px';
                toast.style.fontSize = '14px';
                toast.style.maxWidth = '80%';
                toast.style.textAlign = 'center';
                toast.style.zIndex = '1001';
                toast.style.animation = 'fadeInOut 2.5s forwards';
                
                // 添加动画样式
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeInOut {
                        0%, 100% { opacity: 0; }
                        10%, 90% { opacity: 1; }
                    }
                `;
                document.head.appendChild(style);
                
                document.body.appendChild(toast);
                
                // 2.5秒后自动移除
                setTimeout(() => {
                    if (document.body.contains(toast)) {
                        document.body.removeChild(toast);
                    }
                }, 2500);
            }
        });
    </script>
</body>
</html> 